import React, { useEffect, useState } from 'react'
import { Button, Table, Modal, notification, message } from 'antd'
import {
  DeleteOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
  UploadOutlined
} from '@ant-design/icons'
import { useNavigate } from 'react-router'
import { getNewsListApi, delNewsApi, updateNewsApi } from '@/api/news'
const { confirm } = Modal

function NewsDraft() {
  const navigate = useNavigate()
  const [dataSource, setDataSource] = useState([])
  const [listLoading, setListLoading] = useState(false)
  const { username } = JSON.parse(localStorage.getItem('token'))

  useEffect(() => {
    getNewsList()
  }, [username])

  // 获取列表
  const getNewsList = () => {
    setListLoading(true)
    getNewsListApi({
      author: username,
      auditState: 0,
      '_expand': 'category'
    }).then(res => {
      setListLoading(false)
      setDataSource(res)
    })
  }

  // 弹窗删除确认
  const confirmMethod = (item) => {
    confirm({
      title: '系统提示',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      icon: <ExclamationCircleOutlined/>,
      content: '删除后无法恢复,你确定要删除吗?',
      onOk() {
        setListLoading(true)
        delNewsApi(item.id).then(() => {
          message.success('删除成功')
          getNewsList()
        })
      },
      onCancel() {
        // console.log('Cancel');
        console.log('取消删除了')
      }
    })
  }

  // 提交审核
  const handleCheck = (item) => {
    updateNewsApi(item.id, {
      ...item,
      auditState: 1
    }).then(() => {
      // 跳转到审核列表
      navigate('/audit-manage/list')
      // 通知用户
      notification.info({
        message: '通知',
        description: '您可以到审核管理中查看新闻',
        placement: 'bottomRight'
      })
    })
  }

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      key: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '新闻标题',
      dataIndex: 'title',
      render: (title, item) => {
        return <a href={`#/news-manage/preview/${item.id}`}>{title}</a>
        // return <Button onClick={() => {
        //   navigate(`/news-manage/preview/${item.id}`)
        // }} type="link">{title}</Button>
      }
    },
    {
      title: '作者',
      dataIndex: 'author'
    },
    {
      title: '新闻分类',
      dataIndex: 'category',
      render: (category) => {
        return category.title
      }
    },
    {
      title: '操作',
      render: (item) => {
        return (
          <div>
            <Button icon={<EditOutlined/>} onClick={() => {
              navigate(`/news-manage/update/${item.id}`)
            }} shape="circle" type="primary"/>
            &nbsp;&nbsp;
            <Button danger icon={<DeleteOutlined/>} onClick={() => confirmMethod(item)} shape="circle"/>
            &nbsp;&nbsp;
            <Button icon={<UploadOutlined/>} onClick={() => handleCheck(item)} shape="circle" type="primary"/>
          </div>
        )
      }
    }
  ]

  return (
    <div>
      <Table
        columns={columns}
        dataSource={dataSource}
        loading={listLoading}
        pagination={{ pageSize: 5 }}
        rowKey={item => item.id}
      />
    </div>
  )
}

export default NewsDraft